<template>
  <div class="home-page pd16" id="homePage">
    <el-card class="box-card">
      <div class="view-block">
        <div v-for="(item, index) in viewData" class="view-item" :key="index">
          <div class="top">
            <e-icon class="icon" :type="item.icon" :size="24"></e-icon>
            <span class="name">{{item.name}}</span>
          </div>
          <div class="bottom">
            <span class="count">
              <count-up :endVal="Number(item.total)"></count-up>
            </span>
            <span class="unit">{{item.unit}}</span>
          </div>
        </div>
      </div>
      <div class="chart-block mt16">
        <el-row :gutter="16">
          <el-col :span="14">
            <div class="block-title">
              <span>
                用户/设备增长趋势
              </span>
            </div>
            <div class="mt16 search-params">
              <el-radio-group v-model="searchParams.type">
                <el-radio-button :label="1">日</el-radio-button>
                <el-radio-button :label="2">月</el-radio-button>
              </el-radio-group>
              <span class="rage-label">
                {{searchParams.type === 2 ? '月份范围选择:' : '日期范围选择:'}}
              </span>
              <el-date-picker
                v-if="searchParams.type === 1"
                class="search-date-picker"
                v-model="searchParams.dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 250px;"
              />
              <el-date-picker
                v-if="searchParams.type === 2"
                class="search-date-picker"
                v-model="searchParams.monthRage"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                style="width: 250px;"
              />
              <el-button type="primary" @click="search">查询</el-button>
            </div>
            <div id="trendCharts" class="chart-content mt16"></div>
          </el-col>
          <el-col :span="10">
            <div class="block-title">
              服务器资源鉴定
            </div>
            <div class="info-data mt16">
              <div v-for="(item, index) in serverData" class="info-item pd16 mt16" :key="index">
                <div class="label">{{item.label}}</div>
                <div class="content">
                  <div class="pan">
                    <gauge-com :id="`cpu${index}`" :type="1" :sum="item.cpu"></gauge-com>
                  </div>
                  <div class="pan">
                    <gauge-com :id="`memory${index}`" :type="2" :sum="item.memory"></gauge-com>
                  </div>
                  <div class="pan">
                    <gauge-com :id="`storage${index}`" :type="3" :sum="item.storage"></gauge-com>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="Home">
import { ref, onMounted, onBeforeUnmount, nextTick, onUpdated, reactive, } from 'vue'
import { ElMessage } from 'element-plus'
import EIcon from '@/components/e-icon/e-icon.vue'
import GaugeCom from './gauge-com.vue'
import CountUp from 'vue-countup-v3'
import moment from 'moment'
import * as Echarts from 'echarts'

const svg = `
  <path class="path" d="
    M 30 15
    L 28 17
    M 25.61 25.61
    A 15 15, 0, 0, 1, 15 30
    A 15 15, 0, 1, 1, 27.99 7.5
    L 15 15
  " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`
const viewData = ref<any>([
  { name: '设备安装总数', icon: 'Histogram', total: 1021, unit: '台' },
  { name: '用户总数', icon: 'Compass', total: 3021, unit: '人' },
  { name: '月活用户数', icon: 'Discount', total: 1021, unit: '人' },
  { name: '设备在线数量', icon: 'PieChart', total: 921, unit: '台' },
  { name: '项目总数', icon: 'Document', total: 101, unit: '个' }
])
const serverData = ref<any>([
  { label: '采集服务器', cpu: 80, memory: 75, storage: 70 },
  { label: '应用服务器', cpu: 0, memory: 0, storage: 0 },
  { label: '数据库服务器', cpu: 0, memory: 0, storage: 0 }
])
let tc: echarts.ECharts
const searchParams = reactive({
  type: 1,
  dateRange: [],
  monthRage: []
})

onMounted(() => {
  initEcharts()
  window.addEventListener('resize', resizeCharts, false)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeCharts, false)
})

// 初始化图表
const initEcharts = () => {
  let trendCharts = document.getElementById('trendCharts') as HTMLElement
  tc = Echarts.init(trendCharts)
  tc.setOption({
    legend: {
      icon: 'rect',
      left: 'left'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '8%',
      right: '5%',
      top: '10%',
      bottom: '5%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11/1', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', '11/12']
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '用户',
        data: [820, 932, 800, 800, 1100, 1330, 1320],
        type: 'line',
        symbolSize: 6,
      },
      {
        name: '设备',
        data: [1111, 1222, 910, 950, 1300, 1400, 1420],
        type: 'line',
        symbolSize: 6,
      }
    ]
  })
}

// 初始化日期
const initDate = () => {}

// 初始化月份
const initMonth = () => {}

// 查询
const search = () => {
  console.log(searchParams)
}

// 调整charts窗口
const resizeCharts = () => {
  tc.resize()
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.home-page
  .view-block
    display flex
    margin 0px -8px
    .view-item
      width 20%
      display inline-block
      border-radius 4px
      margin 0px 8px
      color white
      padding 24px
      box-sizing border-box
      .top
        font-size 18px
        .icon
          vertical-align bottom
          margin-right 4px
        .name
          vertical-align bottom
      .bottom
        margin-top 16px
        text-align center
        .count
          font-size 24px
          display inline-block
        .unit
          font-size 14px
          margin-left 10px
      &:nth-child(1)
        background linear-gradient(180deg, rgba(19, 136, 240, 1) 0%, rgba(19, 136, 240, 1) 0%, rgba(36, 87, 255, 1) 100%, rgba(36, 87, 255, 1) 100%)
      &:nth-child(2)
        background linear-gradient(180deg, rgba(102, 102, 255, 1) 0%, rgba(102, 102, 255, 1) 0%, rgba(81, 34, 221, 1) 100%, rgba(81, 34, 221, 1) 100%)
      &:nth-child(3)
        background linear-gradient(180deg, rgba(51, 204, 255, 1) 0%, rgba(51, 204, 255, 1) 0%, rgba(24, 145, 228, 1) 100%, rgba(24, 145, 228, 1) 100%)
      &:nth-child(4)
        background linear-gradient(180deg, rgba(35, 228, 171, 1) 0%, rgba(35, 228, 171, 1) 0%, rgba(9, 174, 233, 1) 100%, rgba(9, 174, 233, 1) 100%)
      &:nth-child(5)
        background linear-gradient(180deg, rgba(254, 199, 88, 1) 0%, rgba(254, 199, 88, 1) 0%, rgba(252, 131, 138, 1) 100%, rgba(252, 131, 138, 1) 100%)
  .chart-block
    .block-title
      font-size 14px
      &:before
        content ''
        display inline-block
        width 2px
        height 14px
        background var(--el-color-primary)
        vertical-align middle
        margin-right 6px
      span
        vertical-align middle
    .search-params
      .el-radio-group
        vertical-align middle
      .rage-label
        font-size 14px
        margin-left 16px
      :deep(.el-date-editor)
        vertical-align middle
        margin-left 16px
      .el-button
        vertical-align middle
        margin-left 16px
    .chart-content
      width 100%
      height 450px
    .info-data
      .info-item
        border 1px solid #ddd
        border-radius 2px
        display flex
        align-items center
        .label
          font-size 18px
          font-weight bold
          display inline-block
          width 120px
          text-align center
          line-height 1
        .content
          display flex
          flex 1
          .pan
            text-align center
            flex 1
</style>
